<template>
    <div class="songlyric">
        <div class="left_img">
            <img :src="PlaySong.songinfo.al.picUrl" alt="">
        </div>
        <div class="right_lyric">
            <ul class="lyrics" :style="transformStyle">
                <li v-for="(item, index) in PlaySong.songlyric" :key="item.timestamp"
                    :class="activeIndex === index ? 'active' : ''">
                    {{ item.content }}
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { watch, ref } from 'vue';
import { usePlaySongStore } from '@/store/playsong.ts';
const PlaySong = usePlaySongStore();
const activeIndex = ref(-1);

const transformStyle = ref<string>('')

// 监听 PlaySong.audioCurrent的变化
watch(() => PlaySong.audioCurrent, (newValue) => {
    for (let i = 0; i < PlaySong.songlyric.length; i++) {
        if (PlaySong.songlyric[i].timestamp < +newValue) {
            activeIndex.value = i
            transformStyle.value = `transform: translateY(${-activeIndex.value * 30}px)`
        }
    }
});


</script>
<style lang="less" scoped>
.songlyric {
    display: flex;
    align-items: center;
    .left_img {
        width: 500px;
        height: 500px;
        overflow: hidden;
        margin-left: 60px;

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        img {
            margin-top: 100px;
            border-radius: 50%;
            animation: rotate 10s linear infinite;
        }
    }

    .right_lyric {
        width: 100%;
        height: 360px;
        overflow: hidden;

        ul {
            width: 100%;
            display: flex;
            flex-direction: column;
            //居中
            align-items: center;
            margin-top: 150px;
            transition: ease .5s;

            li {
                list-style: none;
                line-height: 30px;
                transition: all .5s;
                cursor: pointer;
                &.active {
                    color: #0ccf82;
                    transform: scale(1.2);
                }
            }
        }

        ul::-webkit-scrollbar {
            display: none;
        }
    }
}
</style>
